<template>
  <div class="found-view">

    <van-search @click="goToHomeSearchView" shape="round" :left-icon="icon" disabled placeholder="搜标签、合集、文章、讨论、粮单、用户" />

    <van-tabs v-model:active="active" line-height="0" :swipeable="false" animated>
      <van-tab v-for="(item, index) in titleList" :title="item.title" :key="index">
        <KeepAlive>
          <component :is="comName"></component>
        </KeepAlive>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import icon from "@/assets/images/home/search.png"
import { ref, computed, markRaw } from "vue"
import router from "@/router";

import RecommendedView from "@/components/HomeComponents/FoundComponents/RecommendedView.vue";
import VideoView from "@/components/HomeComponents/FoundComponents/VideoView.vue";
import LiveView from "@/components/HomeComponents/FoundComponents/LiveView.vue";
import LifeView from "@/components/HomeComponents/FoundComponents/LifeView.vue";
import FilmView from "@/components/HomeComponents/FoundComponents/FilmView.vue";
import RecreationView from "@/components/HomeComponents/FoundComponents/RecreationView.vue";
import QuadraticElement from "@/components/HomeComponents/FoundComponents/QuadraticElement.vue";
import GameView from "@/components/HomeComponents/FoundComponents/GameView.vue";
import LiteratureView from "@/components/HomeComponents/FoundComponents/LiteratureView.vue";
import PhotographyView from "@/components/HomeComponents/FoundComponents/PhotographyView.vue";
import PaintingView from "@/components/HomeComponents/FoundComponents/PaintingView.vue";
import DesignView from "@/components/HomeComponents/FoundComponents/DesignView.vue";
import TravelView from "@/components/HomeComponents/FoundComponents/TravelView.vue";
// //发现页
const active = ref(0);
const titleList = ref([
  {
    title: "推荐",
    type: markRaw(RecommendedView)
  },
  {
    title: "视频",
    type: markRaw(VideoView)
  },
  {
    title: "直播",
    type: markRaw(LiveView)
  },
  {
    title: "生活",
    type: markRaw(LifeView)
  },
  {
    title: "影视",
    type: markRaw(FilmView)
  },
  {
    title: "娱乐",
    type: markRaw(RecreationView)
  },
  {
    title: "二次元",
    type: markRaw(QuadraticElement)
  },
  {
    title: "游戏",
    type: markRaw(GameView)
  },
  {
    title: "文学",
    type: markRaw(LiteratureView)
  },
  {
    title: "摄影",
    type: markRaw(PhotographyView)
  },
  {
    title: "绘画",
    type: markRaw(PaintingView)
  },
  {
    title: "设计",
    type: markRaw(DesignView)
  },
  {
    title: "旅行",
    type: markRaw(TravelView)
  }
])


const goToHomeSearchView = () => {
  router.push({
    name: "search"
  });
}

const comName = computed(() => {
  return titleList.value[active.value].type;
})


</script>

<style lang="scss" scoped>
.found-view {
  width: 100vw;
  background-color: rgb(255, 255, 255);
}
</style>